<template>
  <div id="cesiumContainer">
    <!-- <slot :StationEPAdatas="StationEPAdatas">默认内容</slot>可写默认值 具名插槽可以有多个-->
    <!-- <slot :markerArr1="markerArr1"></slot> -->
    <!-- :style="{ transform: 'translate3d(' + item.x1 + 'px,' + item.y1 + 'px, 0)' }" 
    v-for="(item, index) in markerArr2" :key="index"
            :id=" 'popup-fylzStation'  + '-' + item.Level + '-' + index"
            v-show="item.Level=='I' || item.Level=='II'"
    -->
    <!-- 负氧离子城市 -->
    <div class="FPS" v-show="FPSSHOW">
        {{FPS}}FPS 
    </div>
    <!-- 负氧离子城市数据 -->
    <div v-if="$store.state.forq==0" >
        <div  v-for="(item, index) in markerArr1" :key="index" >
            <div :id=" 'popup-fylzCity' + '-' + item.Level + '-' + index  " class="cesium-popup" style="pointer-events: none;z-index:1;position:absolute;" 
            >
                <div class="cesium-popup-content-wrapper" style="box-shadow: 0 0px 0px rgba(0,0,0,0);color:#fff;overflow:inherit">
                    <div id="fuyangProvinceMarker" class="cesium-popup-content">
                        <div style="float:left;user-select: none;">
                            <div>
                                <span style="font-size:23px">{{item.negative_K04}}</span>
                                <span>/{{item.MaxNegative_K04}}</span>
                            </div>
                            <div class="cityName" 
                                data-cityX="item.x" data-cityY="item.y" data-name="item.name" 
                                
                            >
                                <!-- :style='"background:linear-gradient(90deg,rgba(255,255,255,0%) 0%," + item.Color100 +"100%)"' style="background:linear-gradient(90deg,rgba(68,169,190,0) 0%,rgba(39,203,143,1) 100%);text-align:right;"  -->
                                <div class="cityNameClick" style="color:white;text-decoration:none;margin-bottom:5px">    
                                    <span @click="handleClickCity(item.name)" :style='"font-size:20px;display:inline-block;width:100%;pointer-events:auto;background:linear-gradient(270deg,rgba(13,131,214,0) 0%," + item.Color100 + " 100%)"'>{{item.name}} </span>    
                                </div>
                            </div>
                            <div class="henqingxin" :style='"background:" + item.markerColor'>{{item.QXDJ}}</div>
                            
                        </div>
                        <div style="float:left;width:80px;margin-top:36px">
                            <div :style='"float:left;width:25px;height:1px;background:" + item.markerColor' ></div>
                            <div :style='"float:left;width:30px;height:1px;transform-origin:left;transform:rotate(30deg);background:" + item.markerColor'></div>
                        </div>
                        <div class="levelCir" :style='"background:" + item.markerColor'>{{item.Level}}</div>
                        <div id="cubes" style="float:left;display：none;">
                            <div class="wrap">
                                <div class="cube" style="transform: rotate(180deg);">
                                    <div class="front"  :style='"opacity:.4;background:" + item.markerColor+";height:"  + item.height '></div>
                                    <div class="back"   :style='"opacity:.2;background:" + item.markerColor+";height:"  + item.height'></div>
                                    <div class="top"    :style='"background:" + item.markerColor+";height:"  + item.height'></div>
                                    <div class="bottom" 
                                    :style='"background:" + item.markerColor+";height:" + "-" + item.height + ";transform: rotateX(90deg) translateY(50px) translateZ( " + item.heightz + ")"'></div>
                                    <div class="left"   :style='"background:" + item.markerColor+";height:"  + item.height'></div>
                                    <div class="right"  :style='"opacity:.2;background:" + item.markerColor+";height:"  + item.height'></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 负氧离子县级数据 -->
    <div v-if="$store.state.curState==2 && $store.state.forq==0">
        <div  v-for="(item,index) in markerArr4"  
        :id=" 'popup-fylzCounty'  + '-' + item.Level + '-' + index "
        class="cesium-popup"  :key="index"   v-show="item.count"     style="pointer-events: none;position:absolute;z-index:1;">
        <div id="fuyangCityMarker${i}" class="cesium-popup-content-wrapper" style="position:relative;box-shadow: 0 0px 0px rgba(0,0,0,0);color:#fff;overflow:inherit" >
                <div class="cesium-popup-content" style="    margin: 15px 10px 0px;">
                    <div class="fylzStationName" style="width:90%;margin:0 auto;text-align:center;background:rgba(255,255,255,.5)" 
                        data-name="${markerArr[i].name}"
                        data-stationX="${markerArr[i].x}" 
                        data-stationY="${markerArr[i].y}">
                        
                    </div>
                    <div class="fuyangliziNum" :style='"font-size:20px;pointer-events: auto; background:linear-gradient(0deg,rgba(13,131,214,0) 0%," + item.Color100 + " 100%)"'
                        data-stationX="${markerArr[i].x}" 
                        data-stationY="${markerArr[i].y}">
                        <span style="display:block;font-size:20px;margin:o auto;pointer-events: auto;cursor:pointer;color:yellow;" @click="handleClickCounty(item.name, item.x, item.y)">{{item.name}}</span>
                        {{parseInt(item.count)}}</div>
                    <div class="fuyangCanvas" :style='"background:linear-gradient(0deg," + item.Color100 + " 0%,rgba(13,131,214,0) 100%)"'>
                        <div class="fuyanglizi" >
                            <img id="${eleId}canvas" width="76" height="87" :src="item.canvas" />
                        </div>
                    </div>
                </div>
                <div class="yuanquan" :style='"background:" + item.Color100 '>
                    <div class="xiaoyuanquan"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 负氧离子站点数据 -->
    <div v-if="$store.state.curState==3 && $store.state.forq==0">
        <div  v-for="(item,index) in markerArr2"  
        :id=" 'popup-fylzStation'  + '-' + item.Level + '-' + index "
        class="cesium-popup"  :key="index"    v-show="item.negative_K04"    style="pointer-events: none;position:absolute;z-index:1;">
        <div id="fuyangCityMarker${i}" class="cesium-popup-content-wrapper" style="position:relative;box-shadow: 0 0px 0px rgba(0,0,0,0);color:#fff;overflow:inherit" >
                <div class="cesium-popup-content">
                    <div class="fylzStationName" style="width:90%;margin:0 auto;text-align:center;background:rgba(255,255,255,.5)" 
                        data-name="${markerArr[i].name}"
                        data-stationX="${markerArr[i].x}" 
                        data-stationY="${markerArr[i].y}">
                        
                    </div>
                    <div class="fuyangliziNum" :style='"font-size:20px;pointer-events: auto; background:linear-gradient(0deg,rgba(13,131,214,0) 0%," + item.Color100 + " 100%)"'
                        data-stationX="${markerArr[i].x}" 
                        data-stationY="${markerArr[i].y}">
                        <span style="display:block;margin:o auto;pointer-events: auto;cursor:pointer;font-size:20px;color:yellow;" @click="handleClickStation(item.name, item.x, item.y)">{{item.name}}</span>
                        {{parseInt(item.negative_K04)}}</div>
                    <div class="fuyangCanvas" :style='"background:linear-gradient(0deg," + item.Color100 + " 0%,rgba(13,131,214,0) 100%)"'>
                        <div class="fuyanglizi" >
                            <img id="${eleId}canvas" width="76" height="87" :src="item.canvas" />
                        </div>
                    </div>
                </div>
                <div class="yuanquan" :style='"background:" + item.Color100 '>
                    <div class="xiaoyuanquan"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 负氧离子站点,点击查看-->
    <div  v-show="showStation"   id="popup-fylzStation" class="cesium-popup"  style="position:absolute;z-index:1;">
        <div id="fuyangCityMarker${i}" class="cesium-popup-content-wrapper" 
            style="position:relative;box-shadow: 0 0px 0px rgba(0,0,0,0);color:#fff;overflow:inherit" >
            <div class="cesium-popup-content">
                <div class="fylzStationName" style="width:90%;margin:0 auto;text-align:center;background:rgba(255,255,255,.5)" 
                    data-name="${markerArr[i].name}"
                    data-stationX="${markerArr[i].x}" 
                    data-stationY="${markerArr[i].y}">
                </div>
                <div class="fuyangliziNum" :style='"pointer-events: auto; background:linear-gradient(0deg,rgba(13,131,214,0) 0%," + markerArr2N[0].Color100 + " 100%)"'
                    data-stationX="${markerArr[i].x}" 
                    data-stationY="${markerArr[i].y}">
                    <span style="display:block;margin:o auto;pointer-events: auto;cursor:pointer;" @click="handleClickStation(markerArr2N[0].name, markerArr2N[0].x, markerArr2N[0].y)">{{markerArr2N[0].name}}</span>
                    {{markerArr2N[0].count}}
                </div>
                <div class="fuyangCanvas" :style='"background:linear-gradient(0deg," + markerArr2N[0].Color100 + " 0%,rgba(13,131,214,0) 100%)"'>
                    <div class="fuyanglizi" >
                        <img id="${eleId}canvas" width="76" height="87" :src="markerArr2N[0].canvas" />
                    </div>
                </div>
            </div>
            <div class="yuanquan" :style='"background:" + markerArr2N[0].Color100 '>
                <div class="xiaoyuanquan"></div>
            </div>
        </div>
    </div>
    <!-- 气候指数城市 -->
    <div v-if="$store.state.forq == 1" >
        <div v-for="(item, index) in markerArr3" :key="index" >
            <div :id="'popup-Q' + index" class="cesium-popup" style="pointer-events: none;z-index:1">
                <div class="cesium-popup-content-wrapper" style="box-shadow: 0 0px 0px rgba(0,0,0,0);color:#fff;overflow:inherit">
                    <div class="cesium-popup-content" style="margin:0;">
                        <div class="cesium-popup-content-wrapper" style="box-shadow: 0 0px 0px rgba(0,0,0,0);color:#fff;overflow:inherit">
                            <div class="cesium-popup-content">
                                <div class="qxzs">
                                    <div class="qxzsName"  @click="handleClickQCity(item.name,item.x,item.y)">
                                        <span>{{item.name}}</span>
                                    </div>
                                    <div class="qxzsLXY"
                                            :class="{  'class1': item.RPNI >= 85 && item.RPNI <= 100,
                                                    'class2': item.RPNI >= 50 && item.RPNI < 85,
                                                    'class3': item.RPNI >= 0 && item.RPNI < 50,
                                                    'class4': item.RPNI==null
                                                    }" 
                                    ><span class="iconfont">&#xe6d6;</span>: {{parseInt(item.RPNI)}}</div>
                                    <div class="sxzs">
                                        <div :style='"background:" + item.background'>
                                            <span class="iconfont">&#xe600;</span>{{parseInt(item.BCMI)}}
                                        </div>
                                        <div :style='"background:" + item.background1'>
                                            <span class="iconfont">&#xe62d;</span>{{parseInt(item.HCI)}}
                                        </div> 
                                        <div :style='"background:" + item.background2'>
                                            <span class="iconfont">&#xe67d;</span>{{parseInt(item.WCI)}}
                                        </div>
                                        <div :style='"background:" + item.background3'>
                                            <span class="iconfont">&#xe62e;</span>{{parseInt(item.THI)}}
                                        </div>
                                    </div>
                                </div>         
                                <div class="xiaotri"></div>                                                                  
                                <div class="yuanquanBlue">
                                    <div class="xiaoyuanquan"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 气候指数县级数据 -->
    <div v-if="$store.state.curState == 2 && $store.state.forq==1" class="name">
        <div v-for="(item, index) in markerArr7" :key="index">
            <div :id="'popup-county' + index" class="cesium-popup" style="pointer-events: none;z-index:1">
                <div class="cesium-popup-content-wrapper" style="box-shadow: 0 0px 0px rgba(0,0,0,0);color:#fff;overflow:inherit">
                    <div class="cesium-popup-content" style="margin:0;">
                        <div class="cesium-popup-content-wrapper" style="box-shadow: 0 0px 0px rgba(0,0,0,0);color:#fff;overflow:inherit">
                            <div class="cesium-popup-content">
                                <div class="qxzs">
                                    <div class="qxzsName" @click="handleClickQCounty(item.name,item.x,item.y)">
                                        <span>{{item.name}}</span>
                                    </div>
                                    <div class="qxzsLXY"
                                            :class="{  'class1': item.RPNI >= 85 && item.RPNI <= 100,
                                                    'class2': item.RPNI >= 50 && item.RPNI < 85,
                                                    'class3': item.RPNI >= 0 && item.RPNI < 50,
                                                    'class4': item.RPNI==null
                                                    }" 
                                    ><span class="iconfont">&#xe6d6;</span>: {{parseInt(item.RPNI)}}</div>
                                    <div class="sxzs">
                                        <div :style='"background:" + item.background'>
                                            <span class="iconfont">&#xe600;</span>{{parseInt(item.BCMI)}}
                                        </div>
                                        <div :style='"background:" + item.background1'>
                                            <span class="iconfont">&#xe62d;</span>{{parseInt(item.HCI)}}
                                        </div> 
                                        <div :style='"background:" + item.background2'>
                                            <span class="iconfont">&#xe67d;</span>{{parseInt(item.WCI)}}
                                        </div>
                                        <div :style='"background:" + item.background3'>
                                            <span class="iconfont">&#xe62e;</span>{{parseInt(item.THI)}}
                                        </div>
                                    </div>
                                </div>   
                                <div class="xiaotri"></div>                                                                         
                                <div class="yuanquanBlue">
                                    <div class="xiaoyuanquan"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 气候指数站点数据 -->
    <!-- <div v-if="$store.state.curState==3 && $store.state.forq==1" >
        <div v-for="(item, index) in markerArr5" :key="index" >
            <div :id="'popup-station' + index" class="cesium-popup" style="pointer-events: none;z-index:1">
                <div class="cesium-popup-content-wrapper" style="box-shadow: 0 0px 0px rgba(0,0,0,0);color:#fff;overflow:inherit">
                    <div class="cesium-popup-content" style="margin:0;">
                        <div class="cesium-popup-content-wrapper" style="box-shadow: 0 0px 0px rgba(0,0,0,0);color:#fff;overflow:inherit">
                            <div class="cesium-popup-content">
                                <div class="qxzs">
                                    <div class="qxzsName" style="cursor:pointer;width:100%;text-align:center" @click="handleClickQStation(item.name,item.x,item.y,item.qxll)">
                                        <span style="pointer-events: auto;">{{item.name}}</span>
                                    </div>
                                    <div class="qxzsLXY"
                                            :class="{  'class1': item.lxy >= 80 && item.lxy <= 100,
                                                    'class2': item.lxy >= 60 && item.lxy < 80,
                                                    'class3': item.lxy >= 40 && item.lxy < 60,
                                                    'class4': item.lxy >= 20 && item.lxy < 40,
                                                    'class5': item.lxy >= 0 && item.lxy  < 20,
                                                    }" 
                                    ><span class="iconfont">&#xe635;</span>: &nbsp; 好</div>
                                    <div class="sxzs">
                                        <div >
                                            <span class="iconfont">&#xe600;</span>{{item.BCMI}}
                                        </div>
                                        <div >
                                            <span class="iconfont">&#xe690;</span>{{item.HCI}}
                                        </div> 
                                    
                                        <div >
                                            <span class="iconfont">&#xe607;</span>{{item.THI}}
                                        </div>
                                        <div >
                                            <span class="iconfont">&#xe65e;</span>{{item.WCI}}
                                        </div>
                                    </div>
                                </div>                                                                   
                                <div class="yuanquanBlue">
                                    <div class="xiaoyuanquan"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> -->
    <div v-if="$store.state.curState == 3 && $store.state.forq==1" >
        <div v-for="(item, index) in markerArr5" :key="index" >
            <div :id="'popup-station' + index" class="cesium-popup" style="pointer-events: none;z-index:1">
                <div class="cesium-popup-content-wrapper" style="box-shadow: 0 0px 0px rgba(0,0,0,0);color:#fff;overflow:inherit">
                    <div class="cesium-popup-content" style="margin:0;">
                        <div class="cesium-popup-content-wrapper" style="box-shadow: 0 0px 0px rgba(0,0,0,0);color:#fff;overflow:inherit">
                            <div class="cesium-popup-content">
                                <div class="qxzs" style="border:1px soild #ddd">
                                    <div class="qxzsName" style="cursor:pointer;width:100%;text-align:center" @click="handleClickQStation(item.name,item.x,item.y,item.qxll)">
                                        <span style="pointer-events: auto;">{{item.name}}</span>
                                    </div>
                                    <div class="qxzsLXY"
                                            :class="{  'class1': item.RPNI >= 85 && item.RPNI <= 100,
                                                    'class2': item.RPNI >= 50 && item.RPNI < 85,
                                                    'class3': item.RPNI >= 0 && item.RPNI < 50,
                                                    'class4': item.RPNI==null
                                                    }"  
                                    ><span class="iconfont">&#xe6d6;</span>: {{parseInt(item.RPNI)}}</div>
                                    <div class="sxzs">
                                        <div :style='"background:" + item.background'>
                                            <span class="iconfont">&#xe600;</span>{{parseInt(item.BCMI)}}
                                        </div>
                                        <div :style='"background:" + item.background1'>
                                            <span class="iconfont">&#xe62d;</span>{{parseInt(item.HCI)}}
                                        </div> 
                                        <div :style='"background:" + item.background2' >
                                            <span class="iconfont">&#xe67d;</span>{{parseInt(item.WCI)}}
                                        </div>
                                        <div :style='"background:" + item.background3'>
                                            <span class="iconfont">&#xe62e;</span>{{parseInt(item.THI)}}
                                        </div>
                                    </div>
                                </div>
                                <div class="xiaotri"></div>                                                                   
                                <div class="yuanquanBlue" style="margin-top: -10px;">
                                    <div class="xiaoyuanquan"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 气候指数站点和县 -->
    <!-- <div v-if="showQStation" >
            <div id="popup-q1" class="cesium-popup" style="pointer-events: none;z-index:1">
                <div class="cesium-popup-content-wrapper" style="box-shadow: 0 0px 0px rgba(0,0,0,0);color:#fff;overflow:inherit">
                    <div class="cesium-popup-content" style="margin:0;">
                        <div class="cesium-popup-content-wrapper" style="box-shadow: 0 0px 0px rgba(0,0,0,0);color:#fff;overflow:inherit">
                            <div class="cesium-popup-content">
                                <div class="qxzs">
                                    <div style="cursor:pointer;width:100%;text-align:center" @click="handleClickQStation(markerArr5N[0].name,markerArr5N[0].x,markerArr5N[0].y)">
                                        <span style="pointer-events: auto;">{{markerArr5N[0].name}}</span>
                                    </div>
                                    <div style="width:100%;text-align:center" 
                                            :class="{  'class1': markerArr5N[0].lxy >= 80 && markerArr5N[0].lxy <= 100,
                                                    'class2': markerArr5N[0].lxy >= 60 && markerArr5N[0].lxy < 80,
                                                    'class3': markerArr5N[0].lxy >= 40 && markerArr5N[0].lxy < 60,
                                                    'class4': markerArr5N[0].lxy >= 20 && markerArr5N[0].lxy < 40,
                                                    'class5': markerArr5N[0].lxy >= 0 && markerArr5N[0].lxy  < 20,
                                                    }" 
                                    ><span class="iconfont">&#xe635;</span>: &nbsp; 好</div>
                                    <div style="display:flex;flex-wrap:wrap;padding:3px">
                                        <div style="float:left;width:50%">
                                            <span style="float:left" class="iconfont">&#xe600;</span>{{markerArr5N[0].BCMI}}
                                        </div>
                                        <div style="float:left;width:50%">
                                            <span style="float:left" class="iconfont">&#xe690;</span>{{markerArr5N[0].HCI}}
                                        </div> 
                                    
                                        <div style="float:left;width:50%">
                                            <span style="float:left" class="iconfont">&#xe607;</span>{{markerArr5N[0].THI}}
                                        </div>
                                        <div style="float:left;width:50%">
                                            <span style="float:left" class="iconfont">&#xe65e;</span>{{markerArr5N[0].WCI}}
                                        </div>
                                    </div>
                                </div>                                                                   
                                <div class="yuanquanBlue">
                                    <div class="xiaoyuanquan"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div> -->
  </div>
</template>

<script>
import  CesiumMarker from '../province/components/CesiumMarker'
import axios from 'axios'
  export default {
    name: '',
    components: {
        CesiumMarker
    },
    props:{
        newArr1:Array,
        newArr2:Array,
        newArr4:Array,
        newArr3:Array,
        newArr5:Array,
        newArr7:Array
    },
    //watch,不仅仅是在值变化的时候监听，在重新赋值时也在监听
    computed:{
        curState(){
            return this.$store.state.curState
        }
    },
    watch:{
        newArr1:{
            handler: function (newVal,oldVal){
                this.changeArr1();
            },
            deep: true
        },
        newArr2:{
            handler: function (newVal,oldVal){
                this.changeArr2();
            },
            deep: true
        },
        newArr4: {
             handler: function (newVal,oldVal){
                this.changeArr4();
            },
            deep: true
        },
        newArr3: {
             handler: function (newVal,oldVal){
                this.changeArr3();
            },
            deep: true
        },
        newArr5: {
             handler: function (newVal,oldVal){
                this.changeArr5();
            },
            deep: true
        },
        newArr7: {
             handler: function (newVal,oldVal){
                this.changeArr7();
            },
            deep: true
        }
    },
   
    data(){
      return{
        timeOut:null,
        
        //显示坐标，视角海拔，海拔，视高
        fylzSX:null,
        qhzsSX:null,
        x: 0,
        y: 0,
        viewHeight:0,
        seaHeight:0,
        objPopup:{},
        objPopup1:{},
        objPopup2:{},
        objPopup3:{},
        objPopup4:{},
        objPopup7:{},
        pointa: '',
        markerArr1:[],//存储负氧离子城市marker数据
        markerArr2:[],//存储负氧离子城市marker数据
        markerArr3:[],//存储气候指数站点marker数据
        markerArr4:[],//存储负氧离子县站点marker数据
        markerArr5:[],
        markerArr7:[],
        promise:null,
        promise1:null,
        promise2:null,
        fylzProUrl:'/Fylzprovince2.json',
        fylzProUrl1:'/FYLZProvince1.json',
        FPS:null,
        FPSSHOW:false,
        scratch:new Cesium.Cartesian2(),
        model:[],//负氧离子站点数据
        model1:[],//负氧离子县级数据
        showStation:false,
        showQStation:false,
        markerArr2N:[{name:'',canvas:'',count:'',Color100:''}],//点击marker时显示的内容
        markerArr5N:[{name:'',canvas:'',count:'',Color100:'',BCMI:'',HCI:'',THI:'',WCI:''}]
      }
    },
    methods: {
        //气候指数
        addError1(objPopup){
            var that = this;
            this.$nextTick(function() {
               that.$comjs.viewer.scene.preRender.addEventListener(function() {
                for(var i in objPopup){
                    var item = objPopup[i];
                    var htmlOverlay = document.getElementById(i);
                    
                    var position = item.cartesian;
                    var canvasPosition = that.$comjs.viewer.scene.cartesianToCanvasCoordinates(position, that.scratch);
                    if (Cesium.defined(canvasPosition)) {
                        console.log(htmlOverlay.style)
                        htmlOverlay.style.top = canvasPosition.y + 'px';
                        htmlOverlay.style.left = canvasPosition.x + 'px';
                    }else{
                       return false;
                    }
                    
                }
            });
            })
            
        },
        // addError1(objPopup){
        //     var that = this;
        //     function updateViewPoint(eleId, cartesian) {
        //         var point = Cesium.SceneTransforms.wgs84ToWindowCoordinates(that.$comjs.viewer.scene, cartesian);
        //         // var point =  comjs.viewer.scene.cartesianToCanvasCoordinates(cartesian);
        //         if (point == null) return false;
        //         var $view = $("#" + eleId);
        //         var x = point.x - ($view.width() / 2);
        //         var y = point.y - $view.height();
        //         $view.css('transform', 'translate3d(' + x + 'px,' + y + 'px, 0)');
        //         return true;
        //     }
        //     function bind2scene() {
        //         for (var i in objPopup) {
        //             var item = objPopup[i];
        //             updateViewPoint(i, item.cartesian);
        //         }
        //     }
        //     //监听事件的被监听函数，替换参数之后，监听自动remove.
        //     this.$comjs.viewer.scene.preRender.addEventListener(bind2scene);
        // },
        FPSF(){
            if(this.newTIme){
                clearInterval(this.newTime)
            }
            this.newTime = setInterval(()=>{
                this.FPS = Math.floor(Math.random()*(35-30+1)+30)
            },500)
        },
        showFPS(){
            var that = this;
            document.onkeyup=function(event){
                event.preventDefault();
                var e=event||window.event;
                var keyCode=e.keyCode||e.which;
                if(keyCode==18){
                    console.log('alt')
                    that.FPSSHOW = !that.FPSSHOW
                }
            }
        },
        handleClickCity(name,x,y){
            localStorage.setItem('headerCity', name);
            this.$store.commit("changeCityName",name);  
            this.$store.commit("changeCityX",x)
            this.$store.commit("changeCityY",y)
            // this.$router.push('/city/' + name);
            window.location.href= "http://" + window.location.host + '/city/' + name;
        },
        handleClickCounty(name,x,y){
            this.$store.commit("changeForq",0);
            localStorage.setItem('headerConuty', name);
                    localStorage.setItem('countyX', x);
                    localStorage.setItem('countyY', y);
                    this.$store.commit("changeCountyX",x)
                    this.$store.commit("changeCountyY",y)
                    this.$store.commit("changeCountyName",name);
                    // this.$comjs.onCenterR(x,y-0.6,20000.0);
                // this.$router.push('/county/' + name);
                window.location.href= "http://" + window.location.host + '/county/' + name;
                if(this.$route.path.indexOf('county')>0){
                    this.$parent.getCityData()
                }
        },
        handleClickStation(name,x,y){
            localStorage.setItem('headerStation', name);
            localStorage.setItem('stationX', x);
            localStorage.setItem('stationY', y);
            this.$store.commit("changeStationX",x)
            this.$store.commit("changeStationY",y)
            this.$store.commit("changeStationName",name);
            // this.$comjs.onCenterR(x,y-0.6,20000.0);
            //this.$router.push('/station/' + name);
            window.location.href= "http://" + window.location.host + '/station/' + name;
            if(this.$route.path.indexOf('station')>0){
                this.$parent.getStationData()
            }
        },
        // handleClickStation(name,x,y){
        //     for(var i=0;i<this.model.length;i++){
        //         if(name==this.model[i].name){
        //             localStorage.setItem('headerStation', name);
        //             localStorage.setItem('stationX', x);
        //             localStorage.setItem('stationY', y);
        //             this.$store.commit("changeStationX",x)
        //             this.$store.commit("changeStationY",y)
        //             this.$store.commit("changeStationName",name);
        //             // this.$comjs.onCenterR(x,y-0.6,20000.0);
        //             this.$router.push('/station/' + name);
        //             // if(this.$route.path.indexOf('station') >0 ){
        //             //     this.$parent.getStationData()
        //             // }
        //         }
        //     }
        //     for(var i=0;i<this.model1.length;i++){
        //         if(name==this.model1[i].name){
        //             localStorage.setItem('headerConuty', name);
        //             localStorage.setItem('countyX', x);
        //             localStorage.setItem('countyY', y);
        //             this.$store.commit("changeCountyX",x)
        //             this.$store.commit("changeCountyY",y)
        //             this.$store.commit("changeCountyName",name);
        //             // this.$comjs.onCenterR(x,y-0.6,20000.0);
        //             this.$router.push('/county/' + name);
        //             if(this.$route.path.indexOf('county')>0){
        //                 this.$parent.getStationData()
        //             }
        //         }
        //     }
        // },
        handleClickQCity(name,x,y){
            localStorage.setItem('headerCity', name);
            this.$store.commit("changeCityName",name);  
            //this.$router.push('/cityW/' + name);
            window.location.href= "http://" + window.location.host + '/cityW/' + name;
        },
        handleClickQCounty(name,x,y){
            localStorage.setItem('headerConuty', name);
            localStorage.setItem('countyX', x);
            localStorage.setItem('countyY', y);
            this.$store.commit("changeCountyX",x)
            this.$store.commit("changeCountyY",y)
            this.$store.commit("changeCountyName",name);
            //this.$router.push('/countyW/' + name);
            window.location.href= "http://" + window.location.host + '/countyW/' + name;
            if(this.$route.path.indexOf('countyW')>0){
                this.$parent.getCityData()
            }
        },
        handleClickQStation(name,x,y,qxll){
            localStorage.setItem('headerStation', name);
            localStorage.setItem('qxll', qxll);
            localStorage.setItem('stationX', x);
            localStorage.setItem('stationY', y);
            this.$store.commit("changeStationX",x)
            this.$store.commit("changeStationY",y)
            this.$store.commit("changeStationName",name);
            this.$store.commit("changeqxll",qxll);
            // this.$comjs.onCenterR(x,y-0.6,20000.0);
            //this.$router.push('/stationW/' + name);
            window.location.href= "http://" + window.location.host + '/stationW/' + name;
            if(this.$route.path.indexOf('stationW')>0){
                this.$parent.getStationData()
            }
        },
        //实时显示坐标,注意缩进
        getXy: function(){
          var that = this
          var handler3D = new Cesium.ScreenSpaceEventHandler(that.$comjs.viewer.scene.canvas);//初始化之后才能引入全局viewer,进入函数前初始化this,调用全局viewer
              handler3D.setInputAction(function(movement) {
              var pick= new Cesium.Cartesian2(movement.endPosition.x,movement.endPosition.y);
              if(pick){
                  var cartesian = that.$comjs.viewer.scene.globe.pick(that.$comjs.viewer.camera.getPickRay(pick), that.$comjs.viewer.scene);
                  if(cartesian){
                      //世界坐标转地理坐标（弧度）
                      var cartographic = that.$comjs.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
                      if(cartographic){
                          //鼠标位置地球表面物体的真实海拔
                          var height =that.$comjs.viewer.scene.globe.getHeight(cartographic);
                          //视角海拔高度
                          var he = Math.sqrt(that.$comjs.viewer.scene.camera.positionWC.x * that.$comjs.viewer.scene.camera.positionWC.x + that.$comjs.viewer.scene.camera.positionWC.y * that.$comjs.viewer.scene.camera.positionWC.y + that.$comjs.viewer.scene.camera.positionWC.z * that.$comjs.viewer.scene.camera.positionWC.z);
                          var he2 = Math.sqrt(cartesian.x * cartesian.x + cartesian.y * cartesian.y + cartesian.z * cartesian.z);
                          //地理坐标（弧度）转经纬度坐标
                          var point=[ cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180];
                          if(!height){
                              height = 0;
                          }
                          if(!he){
                              he = 0;
                          }
                          if(!he2){
                              he2 = 0;
                          }
                          if(!point){
                              point = [0,0];
                          }
                          
                          let x = point[0].toFixed(6);  
                          let y = point[1].toFixed(6);
                          let viewHeight = (he - he2).toFixed(2); 
                          let seaHeight = height.toFixed(2) ;
                          that.$store.commit('changeXy', {x, y,viewHeight,seaHeight})//通过vuex传递给其他组件
                          //视角海拔高度:"+(he - he2).toFixed(2)+"米"+"&nbsp;&nbsp;&nbsp;&nbsp;
                          //海拔: " + height.toFixed(2)+"米"+"&nbsp;&nbsp;&nbsp;&nbsp;
                          //经度：" + point[0].toFixed(6) + "&nbsp;&nbsp;
                          //纬度：" + point[1].toFixed(6)+ "</span>";
                      }
                  }
              }
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        },
        heightControl: function(){
            var that = this;
            // if(this.$store.state.curState==2){
            // that.$comjs.viewer.dataSources.get(0).show=false;
            // that.$comjs.viewer.dataSources.get(1).show=true;
            // // that.$comjs.viewer.dataSources.get(3).show=false;
            // that.$comjs.viewer.dataSources.get(2).show=false;
            // }
            var handler = new Cesium.ScreenSpaceEventHandler(that.$comjs.viewer.scene.canvas);
            handler.setInputAction(function(wheelment) {
                var height=that.$comjs.viewer.camera.positionCartographic.height;
                //滚动时事件穿透，鼠标在元素上时仍可缩放地球
                //console.log(that.$comjs.viewer.camera.heading)
                //console.log(that.$comjs.viewer.camera.pitch)
                //console.log(that.$comjs.viewer.camera.roll)
                that.$comjs.viewer.dataSources.get(0).show=false;
                that.$comjs.viewer.dataSources.get(1).show=false;
                that.$comjs.viewer.dataSources.get(2).show=false;
                    if(height>914219 ){ 
                        //清除已加载的数据集
                        // that.$comjs.viewer.dataSources.remove(that.$comjs.viewer.dataSources.get(0));
                        // 隐藏已加载的数据集
                        that.$comjs.viewer.dataSources.get(0).show=true;
                        that.$comjs.viewer.dataSources.get(1).show=false;
                        that.$comjs.viewer.dataSources.get(2).show=false;
                        // that.$comjs.viewer.dataSources.get(3).show=false;
                        // that.$comjs.viewer.dataSources.get(4).show=false;
                        
                    }else if(height<914219 && height>313015){
                        that.$comjs.viewer.dataSources.get(0).show=false;
                        that.$comjs.viewer.dataSources.get(1).show=true;
                        // that.$comjs.viewer.dataSources.get(3).show=false;
                        that.$comjs.viewer.dataSources.get(2).show=false;
                        // that.$comjs.viewer.dataSources.get(4).show=true;
                    }else{
                        that.$comjs.viewer.dataSources.get(0).show=false;
                        that.$comjs.viewer.dataSources.get(1).show=false;
                        that.$comjs.viewer.dataSources.get(2).show=true;
                        // that.$comjs.viewer.dataSources.get(3).show=false;
                        // that.$comjs.viewer.dataSources.get(4).show=true;
                    }
                    if(height<123000){//显示站点
                        //改变当前页面要显示的站点内容，
                        // 1：表示显示负氧离子 城市点数据，
                        // 2：表示显示负氧离子 县级点数据，
                        // 3：表示显示负氧离子 站点级数据，
                        that.$store.commit('changeState',3)
                        //当前边界显示状态
                        that.$store.commit('changeFYLZCS',1)
                        
                        // for(var i=0;i<that.model.length;i++){
                        //     that.model[i].show = true
                        // }
                        // for(var i=0;i<that.model1.length;i++){
                        //     that.model1[i].show = false
                        // }
                        that.showStation = false
                        $('div[id^="popup-fylzCity"]').hide();
                        
                    }
                    if(height<313015 && height>123000){//显示县级站点

                        that.$store.commit('changeState',2)
                        that.$store.commit('changeFYLZCS',2)
                        // for(var i=0;i<that.model1.length;i++){
                        //     that.model1[i].show = true
                        // }
                        // for(var i=0;i<that.model.length;i++){
                        //     that.model[i].show = false
                        // }
                        that.showStation = false
                        $('div[id^="popup-fylzCity"]').hide();
                        
                    }
                    if(height>313015 ){//显示城市
                        that.$store.commit('changeState',1)
                        that.$store.commit('changeFYLZCS',0)
                        // for(var i=0;i<that.model.length;i++){
                        //     that.model[i].show=false
                        // }
                        // for(var i=0;i<that.model1.length;i++){
                        //     that.model1[i].show=false
                        // }
                         that.showStation = false
                        $('div[id^="popup-Q"]').show();
                        $('div[id^="popup-fylzCity"]').show();
                    }
                    if(height>2130450){
                        $('div[id^="popup-Q"]').hide();
                        $('div[id^="popup-fylzCity"]').hide();
                    }
            }, Cesium.ScreenSpaceEventType.WHEEL);
            //当鼠标在所加html上面之后，穿透元素，通过当前document对象的滚轮事件，控制球的缩放，同时不影响所加html正常事件执行
            // document.onmousewheel = function(e){
            //     console.log(e.target);
            //     e = e || window.event;
            //     var x =  e.target.className != "search-item" && e.target.className != "searchIcon"
            //     console.log(e.target.className)
            //     if (e.wheelDelta && x) {
            //         if (e.wheelDelta > 0) { //当滑轮向上滚动时
            //             var height=that.$comjs.viewer.camera.positionCartographic.height;
            //             if(height<100000){
            //                 // that.$comjs.zoomIn(10);
            //                 // return
            //             }
            //             // that.$comjs.zoomIn(1000000);
            //         }
            //         if (e.wheelDelta < 0) { //当滑轮向下滚动时 
            //             var height=that.$comjs.viewer.camera.positionCartographic.height;
            //             // if(height<100000){
            //             //     that.$comjs.zoomOut(10);
            //             //     return
            //             // }
            //             // that.$comjs.zoomOut(1000000);
                        
            //         }
            //     }
            //  }
            //另一思路为元素穿透，使用css属性pointer-events:none,使当前元素失去鼠标事件，从而实现该操作（会影响到原来html元素事件执行）
        },
        colorRgba(a){
            let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
            var sColor = a.toLowerCase();
                if(sColor && reg.test(sColor)){
                    if(sColor.length === 4){
                        var sColorNew = "#";
                        for(var i=1; i<4; i+=1){
                            sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));	
                        }
                        sColor = sColorNew;
                    }
                    //处理六位的颜色值
                    var sColorChange = [];
                    for(var i=1; i<7; i+=2){
                        sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));	
                    }
                    return "rgba(" + sColorChange.join(",") + ",100%)";
                }else{
                    return sColor;	
                }
        }, 
        jiaodu: function(){
            var that = this;
            var handler = new Cesium.ScreenSpaceEventHandler(that.$comjs.viewer.scene.canvas);
            handler.setInputAction(function(wheelment) {
                console.log(that.$comjs.viewer.camera.pitch)
            }, Cesium.ScreenSpaceEventType.MIDDLE_DOWN);
        },
        //复氧离子城市数据
        changeArr1(){
            var markerArr1 = [];
            String.prototype.colorRgba = function(){
                var sColor = this.toLowerCase();
                if(sColor && reg.test(sColor)){
                    if(sColor.length === 4){
                        var sColorNew = "#";
                        for(var i=1; i<4; i+=1){
                            sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));	
                        }
                        sColor = sColorNew;
                    }
                    //处理六位的颜色值
                    var sColorChange = [];
                    for(var i=1; i<7; i+=2){
                        sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));	
                    }
                    return "rgba(" + sColorChange.join(",") + ",100%)";
                }else{
                    return sColor;	
                }
            };
            // 传值进来接收，不能直接给data赋值，在传值中，vue是单向数据流，不会随着数据的变化更改视图，注意需要中间转换一次才能改变
            // for(var i=0;i<this.newArr1.length;i++){
            //     this.markerArr1[i]={};
            //     this.markerArr1[i].x=this.newArr1[i].Lon;
            //     this.markerArr1[i].y=this.newArr1[i].Lat;
            //    this.newArr1 = this.$store.state.markerArr1;
            
            for(var i=0;i<this.newArr1.length;i++){
                markerArr1[i]={};
                markerArr1[i].x=this.newArr1[i].Lon;
                markerArr1[i].y=this.newArr1[i].Lat;
                markerArr1[i].markerImg='./mark.png';
                markerArr1[i].name=this.newArr1[i].City;
                markerArr1[i].level=this.newArr1[i].Level;
                markerArr1[i].negative_K04=parseInt(this.newArr1[i].negative_K04);
                markerArr1[i].MaxNegative_K04=this.newArr1[i].MaxNegative_K04;    
                markerArr1[i].markerId=i;
                markerArr1[i].QXDJ=this.newArr1[i].QXDJ;
                switch(this.newArr1[i].Level){
                    case 1:{
                        markerArr1[i].Level='I';
                        markerArr1[i].height="120px"
                        markerArr1[i].heightz="-95px";
                        markerArr1[i].markerColor= this.$comjs.color1;
                        markerArr1[i].markerColor1=[39,203,143]
                        // gradient
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        // markerArr[i].Color100=markerArr[i].markerColor.colorRgba();
                        markerArr1[i].Color100=this.colorRgba(markerArr1[i].markerColor);
                        break;
                    }
                    case 2:{
                        markerArr1[i].Level='II';
                        markerArr1[i].height="100px";
                        markerArr1[i].heightz="-75px";
                        markerArr1[i].markerColor=this.$comjs.color2;
                        markerArr1[i].markerColor1=[11,215,78]
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        // markerArr[i].Color100=markerArr[i].markerColor.colorRgba();
                        markerArr1[i].Color100=this.colorRgba(markerArr1[i].markerColor);

                        break;
                    }
                    case 3:{
                        markerArr1[i].Level='III';
                        markerArr1[i].height="80px";
                        markerArr1[i].heightz="-55px";
                        markerArr1[i].markerColor=this.$comjs.color3;
                        markerArr1[i].markerColor1=[13,131,214]
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        // markerArr[i].Color100=markerArr[i].markerColor.colorRgba();
                        markerArr1[i].Color100=this.colorRgba(markerArr1[i].markerColor);
                        break;
                    }
                    case 4:{
                        markerArr1[i].Level='IV';
                        markerArr1[i].height="60px";
                        markerArr1[i].heightz="-35px";
                        markerArr1[i].markerColor=this.$comjs.color4;
                        markerArr1[i].markerColor1=[95,173,227];
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        // markerArr[i].Color100=markerArr[i].markerColor.colorRgba();
                        markerArr1[i].Color100=this.colorRgba(markerArr1[i].markerColor);
                        break;
                    }
                    case 5:{
                        markerArr1[i].Level='VI';
                        markerArr1[i].height="40px";
                        markerArr1[i].heightz="-15px";
                        markerArr1[i].markerColor=this.$comjs.color5;
                        markerArr1[i].markerColor1=[161,161,161];

                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        // markerArr[i].Color100=markerArr[i].markerColor.colorRgba();
                        markerArr1[i].Color100=this.colorRgba(markerArr1[i].markerColor);
                        break;
                    }
                }
                // markerArr1[i].markerColor1[0], markerArr1[i].markerColor1[1], markerArr1[i].markerColor1[2]
                // var entity = this.$comjs.viewer.entities.add({
                //     name :markerArr1[i].name,
                //     clampToGround: true,
                //     position : Cesium.Cartesian3.fromDegrees(markerArr1[i].x,markerArr1[i].y, 0),
                //     billboard : {
                //         image : markerArr1[i].markerImg,
                //         verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                //         clampToGround: true
                //     }
                // });
                var position =Cesium.Cartesian3.fromDegrees(markerArr1[i].x,markerArr1[i].y, 0);
                var cartesian = position;
                var idName = markerArr1[i].markerId;
                var Level = markerArr1[i].Level;
                var eleId = 'popup-fylzCity' + "-" + Level + "-" + i;
                this.objPopup[eleId] = {
                    cartesian: cartesian
                };
            }
            //this.$store.commit("getobjPopup",this.objPopup)
            //重新赋值
            this.markerArr1 = markerArr1;
        },  
        //负氧离子县级数据 model1
        changeArr4(){
            var markerArr4 = [];
            for(var i=0;i<this.newArr4.length;i++){
                markerArr4[i]={};
                markerArr4[i].x=this.newArr4[i].Lon;
                markerArr4[i].y=this.newArr4[i].Lat;
                markerArr4[i].markerImg='./mark.png';
                markerArr4[i].name=this.newArr4[i].Country;
                markerArr4[i].name1=this.newArr4[i].City;
                markerArr4[i].level=this.newArr4[i].level;
                markerArr4[i].count=this.newArr4[i].negative_K04;
                markerArr4[i].markerId = i;
                switch(this.newArr4[i].Level){
                    case 1:{
                        markerArr4[i].num = 3;
                        markerArr4[i].Level='I';
                        markerArr4[i].markerColor= this.$comjs.color1;
                        markerArr4[i].canvas = '/siji.gif';
                        markerArr4[i].markerImg = "/yq1.png";
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr4[i].Color100=this.colorRgba(markerArr4[i].markerColor);
                        break;
                    }
                    case 2:{
                        markerArr4[i].num = 5;
                        markerArr4[i].Level='II';
                        markerArr4[i].markerColor=this.$comjs.color2;
                        markerArr4[i].canvas = '/sanji.gif';
                         markerArr4[i].markerImg = "/yq2.png"
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr4[i].Color100=this.colorRgba(markerArr4[i].markerColor);
                        break;
                    }
                    case 3:{
                        markerArr4[i].num = 7;
                        markerArr4[i].Level='III';
                        markerArr4[i].markerColor=this.$comjs.color3;
                        markerArr4[i].canvas = '/erji.gif';
                        markerArr4[i].markerImg = "/yq3.png"
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr4[i].Color100=this.colorRgba(markerArr4[i].markerColor);
                        break;
                    }
                    case 4:{
                        markerArr4[i].num = 9;
                        markerArr4[i].Level='IV';
                        markerArr4[i].markerColor=this.$comjs.color4;
                        markerArr4[i].canvas = '/yiji.gif';
                        markerArr4[i].markerImg = "/yq4.png";
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr4[i].Color100=this.colorRgba(markerArr4[i].markerColor);
                        break;
                    }
                    case 5:{
                        markerArr4[i].num = 11;
                        markerArr4[i].Level='VI';
                        markerArr4[i].markerColor=this.$comjs.color5;
                        markerArr4[i].canvas = '/1.gif';
                        markerArr4[i].markerImg = "/yq5.png";
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr4[i].Color100=this.colorRgba(markerArr4[i].markerColor);
                        break;
                    }
                }

                // this.model1[i] = this.$comjs.viewer.entities.add({
                //     name : markerArr4[i].name,
                //     position : Cesium.Cartesian3.fromDegrees(markerArr4[i].x,markerArr4[i].y,0),
                //     billboard : {
                //         image :  markerArr4[i].markerImg,
                //         verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                //         clampToGround: true,
                //         scale:0.1
                //     },
                //     label : {
                //         text : markerArr4[i].name,
                //         font : '20px sans-serif',
                //         // fillColor:Cesium.Color.fromCssColorString(markerArr4[i].markerColor),
                //         horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
                //         pixelOffset : new Cesium.Cartesian2(0.0, -15),
                //         pixelOffsetScaleByDistance : new Cesium.NearFarScalar(1.5e2, 3.0, 1.5e7, 0.5)
                //     }
                // });
                var position =Cesium.Cartesian3.fromDegrees(markerArr4[i].x,markerArr4[i].y, 0);
                var cartesian;
                    cartesian = position;
                var idName = markerArr4[i].markerId;
                var Level = markerArr4[i].Level;
                var eleId = 'popup-fylzCounty' + "-" + Level + "-" + i ;
                this.objPopup3[eleId] = {
                    cartesian: cartesian
                };
            }
           
            this.markerArr4 = markerArr4;
        },
        //负氧离子站点数据 model
        changeArr2(){
            var markerArr2 = [];
            // this.newArr2 = this.$store.state.markerArr2;
            for(var i=0;i<this.newArr2.length;i++){
                markerArr2[i]={};
                markerArr2[i].x=this.newArr2[i].Lon;
                markerArr2[i].y=this.newArr2[i].Lat;
                markerArr2[i].markerImg='./yq1.png';
                markerArr2[i].name=this.newArr2[i].StationName;
                markerArr2[i].name1=this.newArr2[i].City;
                markerArr2[i].level=this.newArr2[i].level;
                markerArr2[i].negative_K04=parseInt(this.newArr2[i].negative_K04);
                markerArr2[i].MaxNegative_K04=this.newArr2[i].MaxNegative_K04;
                markerArr2[i].markerId = i;
                markerArr2[i].QXDJ=this.newArr2[i].QXDJ;
                switch(this.newArr2[i].Level){
                    case 1:{
                        markerArr2[i].num = 3;
                        markerArr2[i].Level='I';
                        markerArr2[i].markerColor=this.$comjs.color1;
                        markerArr2[i].canvas = '/siji.gif';
                        markerArr2[i].markerImg='./yq1.png';
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr2[i].Color100=this.colorRgba(markerArr2[i].markerColor);
                        break;
                    }
                    case 2:{
                        markerArr2[i].num = 5;
                        markerArr2[i].Level='II';
                        markerArr2[i].markerColor=this.$comjs.color2;
                        markerArr2[i].canvas = '/sanji.gif';
                        markerArr2[i].markerImg='./yq2.png';
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr2[i].Color100=this.colorRgba(markerArr2[i].markerColor);
                        break;
                    }
                    case 3:{
                        markerArr2[i].num = 7;
                        markerArr2[i].Level='III';
                        markerArr2[i].markerColor=this.$comjs.color3;
                        markerArr2[i].canvas = '/erji.gif';
                        markerArr2[i].markerImg='./yq3.png';
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr2[i].Color100=this.colorRgba(markerArr2[i].markerColor);
                        break;
                    }
                    case 4:{
                        markerArr2[i].num = 9;
                        markerArr2[i].Level='IV';
                        markerArr2[i].markerColor=this.$comjs.color4;
                        markerArr2[i].canvas = '/yiji.gif';
                        markerArr2[i].markerImg='./yq4.png';
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr2[i].Color100=this.colorRgba(markerArr2[i].markerColor);
                        break;
                    }
                    case 5:{
                        markerArr2[i].num = 11;
                        markerArr2[i].Level='VI';
                        markerArr2[i].markerColor=this.$comjs.color5;
                        markerArr2[i].canvas = '/1.gif';
                        markerArr2[i].markerImg='./yq5.png';
                        //markerArr[i].Color0=markerArr[i].markerColor.colorRgba0();
                        markerArr2[i].Color100=this.colorRgba(markerArr2[i].markerColor);
                        break;
                    }
                }
                //加entity
                // this.model[i] = this.$comjs.viewer.entities.add({
                //     name : markerArr2[i].name,
                //     position : Cesium.Cartesian3.fromDegrees(markerArr2[i].x,markerArr2[i].y,0),
                //     billboard : {
                //         image : markerArr2[i].markerImg,
                //         verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                //         clampToGround: true,
                //         scale:0.1
                //     },
                //     label : {
                //         text : markerArr2[i].name ,
                //         font : '10px sans-serif',
                //         // showBackground : true,
                //         horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
                //         pixelOffset : new Cesium.Cartesian2(0.0, 5),
                //         pixelOffsetScaleByDistance : new Cesium.NearFarScalar(1.5e2, 3.0, 1.5e7, 0.5)
                //     }
                // });
                //加div
                // if(markerArr2[i].Level=='I'||markerArr2[i].Level=='II'){
                var position = Cesium.Cartesian3.fromDegrees(markerArr2[i].x,markerArr2[i].y, 0);
                var cartesian;
                cartesian = position;
                var idName = markerArr2[i].markerId;
                var Level = markerArr2[i].Level;
                var eleId = 'popup-fylzStation' + "-" + Level + "-" + i;
                this.objPopup1[eleId] = {
                    cartesian: cartesian
                };
                // }
            } 
            
            this.markerArr2 = markerArr2;
        },
        // 动态改变颜色
        fourColor(myArr,yourArr){ 
            switch( myArr.BCMIDJ ){
                    case '舒适':{
                        yourArr.background = "#32F3A9";
                        break;
                    }
                    case '一般舒适':{
                        yourArr.background = "#63B5E6";
                        break;
                    }
                    case '不舒适':{
                        yourArr.background = "#E8CE67";
                        break;
                    }
                    default:{
                        yourArr.background = 'transparent';
                    }
                }
                switch( myArr.HCIDJ ){
                    case '特别适宜':{
                        yourArr.background1 = "#32F3A9";
                        break;
                    }
                    case '适宜':{
                        yourArr.background1 = "#63B5E6";
                        break;
                    }
                    case '不适宜':{
                        yourArr.background1 = "#E8CE67";
                        break;
                    }
                    default:{
                        yourArr.background1 = 'transparent';
                    }
                }
                switch( myArr.WCIDJ){
                    case '无胁迫':{
                        yourArr.background2 = "#32F3A9";
                        break;
                    }
                    case '弱冷胁迫':{
                        yourArr.background2 = "#32F3A9";
                        break;
                    }
                    case '中冷胁迫':{
                        yourArr.background2 = "#63B5E6";
                        break;
                    }
                    case '强冷胁迫':{
                        yourArr.background2 = "#E8CE67";
                        break;
                    }
                    default:{
                        yourArr.background2 = 'transparent';
                    }
                }
                switch( myArr.THIDJ ){
                    case '无胁迫':{
                        yourArr.background3 = "#32F3A9";
                        break;
                    }
                    case '弱温湿胁迫':{
                        yourArr.background3 = "#32F3A9";
                        break;
                    }
                    case '中温湿胁迫':{
                        yourArr.background3 = "#63B5E6";
                        break;
                    }
                    case '强温湿胁迫':{
                        yourArr.background3 = "#E8CE67";
                        break;
                    }
                    default:{
                        yourArr.background3 = 'transparent';
                    }
                }
        },
        // 气象指数城市数据
        changeArr3(){
            var markerArr3 = [];
            //console.log(this.newArr3)
            for(var i=0;i<this.newArr3.length;i++){
                markerArr3[i]={};
                markerArr3[i].x=this.newArr3[i].Lon;
                markerArr3[i].y=this.newArr3[i].Lat;
                markerArr3[i].markerImg='./mark.png';
                markerArr3[i].name=this.newArr3[i].City;
                markerArr3[i].BCMI = parseInt(this.newArr3[i].BCMI);
                markerArr3[i].HCI = parseInt(this.newArr3[i].HCI);
                markerArr3[i].THI = parseInt(this.newArr3[i].THI);
                markerArr3[i].WCI = parseInt(this.newArr3[i].WCI);
                markerArr3[i].RPNI = parseInt(this.newArr3[i].RPNI);
                markerArr3[i].markerId = i;
                markerArr3[i].lxy = Math.floor(Math.random()*101);
                //四项指数球上背景色
                this.fourColor(this.newArr3[i],markerArr3[i]);
                var position =Cesium.Cartesian3.fromDegrees(markerArr3[i].x,markerArr3[i].y, 0);
                var cartesian = position;
                // var idName = markerArr3[i].markerId;
                // var Level = markerArr3[i].Level;
                var eleId =  'popup-Q' + i;
                this.objPopup2[eleId] = {
                    cartesian: cartesian
                };
            }
            // this.$store.commit("getobjPopup2",this.objPopup2)
            this.markerArr3 = markerArr3;

        },
        //气象指数县数据 model1
        changeArr7(){
            var markerArr7 = [];
            for(var i=0;i<this.newArr7.length;i++){
                markerArr7[i]={};
                markerArr7[i].x=this.newArr7[i].Lon;
                markerArr7[i].y=this.newArr7[i].Lat;
                markerArr7[i].markerImg='./mark.png';
                markerArr7[i].name=this.newArr7[i].Country;
                markerArr7[i].name1=this.newArr7[i].City;
                markerArr7[i].BCMI = parseInt(this.newArr7[i].BCMI);
                markerArr7[i].HCI = parseInt(this.newArr7[i].HCI);
                markerArr7[i].THI = parseInt(this.newArr7[i].THI);
                markerArr7[i].WCI = parseInt(this.newArr7[i].WCI);
                markerArr7[i].RPNI = parseInt(this.newArr7[i].RPNI);
                markerArr7[i].markerId = i;
                markerArr7[i].lxy = this.newArr7[i].RPNI;
                this.fourColor(this.newArr7[i],markerArr7[i]);
                var position =Cesium.Cartesian3.fromDegrees(markerArr7[i].x,markerArr7[i].y, 0);
                var cartesian = position;
                var idName = markerArr7[i].markerId;
                var Level = markerArr7[i].Level;
                var eleId =  'popup-county' + i;
                this.objPopup7[eleId] = {
                    cartesian: cartesian
                };
                // markerArr7[i].markerImg='./yq4.png';
                // this.model1[i] = this.$comjs.viewer.entities.add({
                //     name : markerArr7[i].name,
                //     position : Cesium.Cartesian3.fromDegrees(markerArr7[i].x,markerArr7[i].y,0),
                //     billboard : {
                //         image : markerArr7[i].markerImg,
                //         verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                //         clampToGround: true,
                //         scale:0.1
                //     },
                //     label : {
                //         text : markerArr7[i].name ,
                //         font : '20px sans-serif',
                //         horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
                //         pixelOffset : new Cesium.Cartesian2(0.0, 5),
                //         pixelOffsetScaleByDistance : new Cesium.NearFarScalar(1.5e2, 3.0, 1.5e7, 0.5)
                //     }
                // });
            }
            //  this.$store.commit("getobjPopup7",this.objPopup7)
            this.markerArr7 = markerArr7;

        },
        //气象指数站点数据model
        changeArr5(){
            var markerArr5 = [];
            for(var i=0;i<this.newArr5.length;i++){
                markerArr5[i]={};
                markerArr5[i].x=this.newArr5[i].Lon;
                markerArr5[i].y=this.newArr5[i].Lat;
                markerArr5[i].markerImg='./mark.png';
                markerArr5[i].name=this.newArr5[i].StationName;
                markerArr5[i].name1=this.newArr5[i].City;
                markerArr5[i].level=this.newArr5[i].level;
                markerArr5[i].BCMI = parseInt(this.newArr5[i].BCMI);
                markerArr5[i].HCI = parseInt(this.newArr5[i].HCI);
                markerArr5[i].THI = parseInt(this.newArr5[i].THI);
                markerArr5[i].WCI = parseInt(this.newArr5[i].WCI);
                markerArr5[i].qxll = this.newArr5[i].IIiii;
                markerArr5[i].RPNI = this.newArr5[i].RPNI;
                this.fourColor(this.newArr5[i],markerArr5[i]);
                var position =Cesium.Cartesian3.fromDegrees(markerArr5[i].x,markerArr5[i].y, 0);
                var cartesian = position;
                var idName = markerArr5[i].markerId;
                var Level = markerArr5[i].Level;
                var eleId =  'popup-station' + i;
                this.objPopup4[eleId] = {
                    cartesian: cartesian
                };
                
                // markerArr5[i].markerImg='./1.gif';
                // this.model[i] = this.$comjs.viewer.entities.add({
                //     name : markerArr5[i].name,
                //     position : Cesium.Cartesian3.fromDegrees(markerArr5[i].x,markerArr5[i].y,0),
                //     billboard : {
                //         image : markerArr5[i].markerImg,
                //         verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                //         clampToGround: true,
                //         scale:0.1
                //     },
                //     label : {
                //         text : markerArr5[i].name ,
                //         font : '20px sans-serif',
                //         // showBackground : true,
                //         horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
                //         pixelOffset : new Cesium.Cartesian2(0.0, 5),
                //         pixelOffsetScaleByDistance : new Cesium.NearFarScalar(1.5e2, 3.0, 1.5e7, 0.5)
                //     }
                // });
            }
            
            this.markerArr5 = markerArr5;

        },
        showStationDetial(){
            var that = this;
            var pickPosition;
            var xNew;
            var yNew;
            this.$comjs.viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
                var picked = that.$comjs.viewer.scene.pick(movement.position);//点击实体时显示内容
                for(var i = 0;i<that.model.length;i++){
                    if (picked) {
                        
                        if (picked.id == that.model[i]) {
                           
                            pickPosition = that.$comjs.viewer.scene.pickPosition(movement.position);
                            if(that.$store.state.forq==0){
                                that.showStation=true;
                                xNew = that.markerArr2[i].x;
                                yNew = that.markerArr2[i].y;
                                that.markerArr2N[0].name = that.markerArr2[i].name;
                                that.markerArr2N[0].canvas = that.markerArr2[i].canvas;
                                that.markerArr2N[0].Color100 = that.markerArr2[i].Color100;
                                
                            }
                            if(that.$store.state.forq==1){
                                that.showQStation=true;
                                xNew = that.markerArr5[i].x;
                                yNew = that.markerArr5[i].y;
                                // markerArr5N:[{name:'',canvas:'',count:'',Color100:'',BCMI:'',HCI:'',THI:'',WCI:''}]
                                that.markerArr5N[0].name = that.markerArr5[i].name;
                                that.markerArr5N[0].canvas = that.markerArr5[i].canvas;
                                that.markerArr5N[0].Color100 = that.markerArr5[i].Color100;
                                that.markerArr5N[0].BCMI = that.markerArr5[i].BCMI;
                                that.markerArr5N[0].HCI = that.markerArr5[i].HCI;
                                that.markerArr5N[0].THI = that.markerArr5[i].THI;
                                that.markerArr5N[0].WCI = that.markerArr5[i].WCI;
                            }
                            
                            
                            
                        }
                    } else {
                        that.showStation=false;
                        that.showQStation=false;
                    }
                }
                for(var i = 0;i<that.model1.length;i++){
                    if (picked) {
                        if (picked.id == that.model1[i]) {
                            console.log(that.model1[i])
                            pickPosition = that.$comjs.viewer.scene.pickPosition(movement.position);
                            if(that.$store.state.forq==0){
                                that.showStation=true;
                            
                                xNew = that.markerArr4[i].x;
                                yNew = that.markerArr4[i].y;
                                that.markerArr2N[0].name = that.markerArr4[i].name;
                                that.markerArr2N[0].canvas = that.markerArr4[i].canvas;
                                that.markerArr2N[0].count = that.markerArr4[i].count;
                                that.markerArr2N[0].Color100 = that.markerArr4[i].Color100;
                            }
                            if(that.$store.state.forq==1){
                                
                                that.showQStation=true;
                                xNew = that.markerArr7[i].x;
                                yNew = that.markerArr7[i].y;
                                // markerArr5N:[{name:'',canvas:'',count:'',Color100:'',BCMI:'',HCI:'',THI:'',WCI:''}]
                                that.markerArr5N[0].name = that.markerArr7[i].name;
                                that.markerArr5N[0].canvas = that.markerArr7[i].canvas;
                                that.markerArr5N[0].Color100 = that.markerArr7[i].Color100;
                                that.markerArr5N[0].BCMI = that.markerArr7[i].BCMI;
                                that.markerArr5N[0].HCI = that.markerArr7[i].HCI;
                                that.markerArr5N[0].THI = that.markerArr7[i].THI;
                                that.markerArr5N[0].WCI = that.markerArr7[i].WCI;
                            }
                        }
                    } else {
                        that.showStation=false;
                        that.showQStation=false;
                    }
                }
                    
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            var removeChanged = that.$comjs.viewer.scene.postRender.addEventListener(function (percentage) {
                //转换到屏幕坐标
                if (pickPosition &&  that.showStation == true || that.showQStation == true ) {
                    var winpos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(that.$comjs.viewer.scene, Cesium.Cartesian3.fromDegrees(xNew,yNew, 0));
                    // var winpos =that.$comjs.viewer.scene.cartesianToCanvasCoordinates(pickPosition);
                    if (winpos) {
                       if(that.$store.state.forq==0){
                            var x = winpos.x - ($('#popup-fylzStation').width() / 2);
                            var y = winpos.y - $('#popup-fylzStation').height();
                            
                            // info.style.left = x + 'px';
                            // info.style.top = y + 'px';
                            $('#popup-fylzStation').css('transform', 'translate3d(' + x + 'px,' + y + 'px, 0)');
                       }
                       if(that.$store.state.forq==1){
                            var x = winpos.x - ($('#popup-q1').width() / 2);
                            var y = winpos.y - $('#popup-q1').height();
                           
                            // info.style.left = x + 'px';
                            // info.style.top = y + 'px';
                            $('#popup-q1').css('transform', 'translate3d(' + x + 'px,' + y + 'px, 0)');
                       }

                        
                    }
                }
            });
        },
        showCountyDetial(){
            var that = this;
            var pickPosition;
            var xNew;
            var yNew;
            this.$comjs.viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
                var picked = that.$comjs.viewer.scene.pick(movement.position);//点击实体时显示内容
                
                for(var i = 0;i<that.model1.length;i++){
                    if (picked) {
                        if (picked.id == that.model1[i]) {
                            console.log(that.model1[i])
                            pickPosition = that.$comjs.viewer.scene.pickPosition(movement.position);
                            that.showStation=true;
                            xNew = that.markerArr4[i].x;
                            yNew = that.markerArr4[i].y;
                            that.markerArr4N[0].name = that.markerArr4[i].name;
                            that.markerArr4N[0].canvas = that.markerArr4[i].canvas;
                            that.markerArr4N[0].Color100 = that.markerArr4[i].Color100;
                            console.log(that.markerArr4N[0])
                            
                            
                        }
                    } else {
                        that.showStation=false;
                    }
                }
                    
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            var removeChanged = that.$comjs.viewer.scene.postRender.addEventListener(function (percentage) {
                //转换到屏幕坐标
                if (pickPosition &&  that.showStation == true ) {
                    var winpos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(that.$comjs.viewer.scene, Cesium.Cartesian3.fromDegrees(xNew,yNew, 0));
                    // var winpos =that.$comjs.viewer.scene.cartesianToCanvasCoordinates(pickPosition);
                    if (winpos) {
                       
                        var x = winpos.x - ($('#popup-fylzCounty').width() / 2);
                        var y = winpos.y - $('#popup-fylzCounty').height();
                        var info = document.getElementById('popup-fylzCounty');
                        // info.style.left = x + 'px';
                        // info.style.top = y + 'px';
                        $('#popup-fylzCounty').css('transform', 'translate3d(' + x + 'px,' + y + 'px, 0)');
                    }
                }
            });
        }
    },    
    beforeDestroy(){
        if(this.fylzSX){
            clearInterval(this.fylzSX)
        }
        if(this.qhzsSX){
            clearInterval(this.qhzsSX)
        }
        if(this.timeOut){
            clearInterval(this.timeOut)
        }
    },
    mounted(){
        this.$comjs.cesiumInit();
        // this.FPSF();
        // this.showFPS();
        // 增加所有marker，控制通过视高控制marker显示隐藏
        this.getXy();//获取经纬度
        this.heightControl();//鼠标滚轮获取视高，动态控制
        // this.$comjs.addF();
        //请求marker数据
        setTimeout(()=>{
            if(this.$store.state.forq==0){
                this.$comjs.addError1(this.objPopup);
                this.$comjs.addError1(this.objPopup1);
                this.$comjs.addError1(this.objPopup3);
            }else if(this.$store.state.forq==1){
                this.$comjs.addError1(this.objPopup2);
                this.$comjs.addError1(this.objPopup4);
                this.$comjs.addError1(this.objPopup7);
            }
        },500)
        
        // if(this.$store.state.forq==0){
        //     // this.getProvinceData();
        //     this.fylzSX = setInterval(()=>{
        //         // this.getProvinceData();
        //     },3600000);
        // }
        // if(this.$store.state.forq==1){
        //     // this.getProvinceWData();
        //     this.qhzsSX = setInterval(()=>{
        //         // this.getProvinceData();
        //     },3600000);
        // }
        // setTimeout(()=>{
        //     //固定时间刷新
        //     var nowDate = new Date();
        //     var nowHour = nowDate.getHours();
        //     if(nowHour==3){
        //         //执行刷新页面
        //         //location.reload()
        //     }
        //     console.log(nowHour);
        //     this.fylzProUrl = "/FYLZProvince1.json"
        //     // this.getProvinceData();
        // },5000)
        // setTimeout(()=>{
        //     //调用外部方法，绑定html到球面上,此方法绑定球上的坐标，获取不到，鼠标远离球面都会使球面数据出现错误，从而报错，出现不能获取x,y的错误

        //     // this.$comjs.addError(this.objPopup);
        //     // this.$comjs.addError1(this.objPopup1);
        //     // this.$comjs.addError2(this.objPopup2);
        //     // this.$comjs.addError3(this.objPopup3);
            
        //     for(var i=0;i<this.model1.length;i++){
        //         this.model1[i].show = false
        //     }
        // },1000)
        // setTimeout(()=>{
        //     for(var i=0;i<this.model.length;i++){
        //         this.model[i].show = false
        //     }
        // },500)
       
        // 无法提供定位，可能是最新的还没有更新
        this.$comjs.onCenter(119.906064,29.573401,721000.0);
    }
    
  }
</script>


<style  >
    #cesiumContainer{
        width:100vw;
        height:100vh;
        overflow: hidden;
    }
    .cesium-viewer-bottom{
        display:none;
    }
    .FPS{
        width:80px;
        height:50px;
        position:absolute;
        top:9px;
        right:0px;
        z-index:3000;
        color:#EE5522;
        font-size: 20px;
        text-align: center;
    }
</style>
